<template>
  <div id="app">
   <MyHeader/>
   <hr>
   <router-view></router-view>
   <hr>
   
   <!-- footer组件在home和search路由组件下显示,在login和suggest下不显示 -->
   <!-- 当路由规则在/home,或者是search下让他显示 但是路由规则较多时判断较为麻烦 可以用路由元信息meta添加判断条件-->
   <!-- <MyFooter v-show="$route.path=='/home'||$route.path=='/search'"/> -->
   <!-- 根据展示路由页面的不同决定要不要展示myfooter组件，路由元信息中配置个人标识 -->
   <MyFooter v-show="$route.meta.showfooter"/>
  </div>
</template>
  
<script>
  //导入myheader，myfooter组件并应用
  import MyHeader from './components/MyHeader'
  import MyFooter from './components/MyFooter'

export default {
  name: 'App',
  components: {
    //注册组件
    MyHeader,
    MyFooter,
  },
  mounted(){
    //console.log(this.$route);
  }
}
</script>

<style scoped>

  /* 太丑了 */
  /* background-image: linear-gradient(#e66465, #9198e5); */

</style>
